<script setup>
import { ref, toRefs } from 'vue'
import { useRoute } from 'vue-router'
import { usePlayListStore } from '@/stores/playListStore'
import { useAudioStore } from '@/stores/audioStore'
import { collcetOrDeleteSongAPi } from '@/apis/song.js'
import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps({
  songId: {
    type: Number
  },
  isMy: {
    type: Boolean
  }
})
const usePlayList = usePlayListStore()
const useAudio = useAudioStore()
const { createPlayList } = toRefs(usePlayList)
const route = useRoute()


const dialogVisible = ref(false)
const playListId = ref('')

// 确认收藏歌单
const collectSong = async () => {
  collectOrDelectSong('add', playListId.value, '收藏成功')
  dialogVisible.value = false
}

// 删除歌单内的歌曲
const deleteSong = () => {
  ElMessageBox.confirm(
    '确定要删除此歌单吗？',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      collectOrDelectSong('del', route.params.id, '删除成功')
      const index = useAudio.allSongList.findIndex(item => item.id === props.songId)
      useAudio.allSongList.splice(index, 1)
    })
}

const collectOrDelectSong = async (meth, id, message) => {
  const { data } = await collcetOrDeleteSongAPi(meth, id, props.songId)
  if (data.status === 200) {
    ElMessage({
      message,
      type: 'success'
    })
  } else {
    ElMessage({
      message: data.message || '操作失败'
    })
  }
}
</script>

<template>
  <div class="list-card-collect">
    <!-- 编辑弹框 -->
    <el-popover popper-style="min-width: 100px;width: 108px;padding: 4px;" placement="bottom" trigger="click"
      :hide-after="100">
      <template #reference>
        <span class="iconfont icon-gengduo" @click.stop></span>
      </template>
      <div class="popover-text">
        <p @click="deleteSong" v-show="isMy">删除歌曲</p>
        <p @click="dialogVisible = true">收藏到歌单</p>
      </div>
    </el-popover>
    <!-- / 编辑弹框 -->

    <!-- 弹出框 -->
    <div  @click.stop>
      <el-dialog v-model="dialogVisible" title="请选择歌单" width="450">
        <ul class="list-box">
          <li v-for="item in createPlayList" :key="item.id" :class="{ active: item.id === playListId }"
            @click="playListId = item.id">
            <img :src="item.coverImgUrl + '?params=200y200'" alt="">
            <p class="ellipsis">{{ item.name }}</p>
          </li>
        </ul>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="collectSong">
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped lang='scss'>
.list-card-collect {
  .icon-gengduo {
    font-size: 26px;
  }

  .list-box {
    height: 400px;
    overflow-y: auto;

    li {
      display: flex;
      align-items: center;
      padding: 0px 10px;
      line-height: 60px;
      margin: 3px 0px;
      border: 2px solid #fff;
      border-radius: 5px;

      img {
        width: 50px;
        border-radius: 3px;
        margin-right: 5px;
      }

      &:hover {
        border: 2px solid rgb(136, 103, 242, 0.5);
      }
    }

    .active {
      border: 2px solid rgb(136, 103, 242, 0.5);
    }
  }

  :deep(.el-dialog__body) {
    padding: 10px;
  }

  :deep(.el-overlay) {
    background-image: none !important;
    background-color: rgba(239, 239, 239, 0.3) !important;
  }
}

.popover-text {
  cursor: pointer;

  p {
    width: 100px;
    line-height: 40px;
    text-align: center;
    border-radius: 3px;
    letter-spacing: 1px;

    &:hover {
      background-color: #8867f2;
      color: #fff;
    }
  }
}
</style>
